<script>
export default {
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    task_id: {
      type: Number,
      default: -1
    },
    // eslint-disable-next-line vue/prop-name-casing
    task_result: {
      type: Object,
      required: true,
      default: () => ({})
    },
    title:{
      type:String,
      default:null
    },
    
  },
  computed:{
    headline_title(){
      if(!this.title){
        return `Task${this.task_id}的输出结果如下`
      }else{
        return this.title
      }
    }
  }
}
</script>

<template>
  <div class="run-coloring app-container">
    <h3 > {{  headline_title }} </h3>
    <json-viewer :value="task_result" />
  </div>
</template>

<style scoped>
.run-coloring {
  background: #b3d4fc;
  padding-top: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.app-container {
  left: 0;
  width: 100%;
}
</style>
